import * as React from 'react'
import {
    StyleSheet,
    TouchableWithoutFeedback,
    View,
    Text
} from 'react-native'
import Icon from 'react-native-vector-icons/AntDesign'
import { useNavigation } from '@react-navigation/native'
import theme from '../../../config/theme'

function Search() {
    const nav = useNavigation()

    return (
        <TouchableWithoutFeedback onPress={() => nav.navigate('SearchHot')}>
            <View style={styles.container}>
                <Icon name="search1" size={16} color="#333"/>
                <Text style={styles.text}>搜索剧集、明星</Text>
            </View>
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 10,
        backgroundColor: theme.whiteColor,
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 38,
        paddingVertical: 3,
    },
    text: {
        marginLeft: 5,
        color: theme.deepGrey,
        fontSize: 14
    }
});

export default Search
